<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学院-班级博客</title>
    <link rel="stylesheet" href="./xlr-css/reset.css">
    <link rel="stylesheet" href="./xlr-css/save.css">
    <link rel="stylesheet" href="./xlr-css/example.css">
    <link rel="stylesheet" href="./xlr-css/sweet-alert.css">
    <link rel="stylesheet" href="./xlr-css/style.css">
    <style>
        tr td:last-child a {
            padding-left: 11px;
        }
    </style>
</head>

<body>
    <!-- 顶部导航 -->
    <div class="nav-top">
        <ul>
            <li><img src="./xlr-img/logo.png" alt=""></li>
            <li><a href="/">首页</a></li>
            <li><a href="/going" class="first">学习计划</a></li>
            <li><a href="/class">班级</a></li>
            <li><a href="/dynamic">学习动态</a></li>
        </ul>

    </div>

<!-- 按钮 -->
    <div class="content">
        <ul class="nav">
            <li class="going">进行中</li>
            <li>已创建</li>
        </ul>
        <span class="addition">+</span>
        <div class="content-log"><img src="./xlr-img/yezi.png" alt=""></div>
        <div class="input">
            <input type="text" name="update" class="update" placeholder="输入你想要修改的内容" value="">
        </div>
    </div>

    <div class="add">
        <table>
            <tbody>

            </tbody>
        </table>
    </div>



    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/template/template.js"></script>
    <script src="./xlr-js/sweet-alert.js"></script>
    <script src="./xlr-js/sweet-alert.min.js"></script>
    <script src="./xlr-js/input.js"></script>
    <!-- 显示内容的模板 -->
    <script type="text/template" id="temp">
        {{each list}}
        <tr>
            
            <td>&nbsp;&nbsp;&nbsp;{{ $value.study_content }}</td>
            <td><a href="javascprit:;" data-id="{{$value.study_id}}" class="del"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="./xlr-img/delete.png" alt=""></a></td>
            <td><a href="javascprit:;" data-id="{{$value.study_id}}" class='upt'>&nbsp;&nbsp;&nbsp;&nbsp;<img src="./xlr-img/update.png" alt=""></a></td>
            <td><a href="javascprit:;" data-id="{{$value.study_id}}" class='revise'>修改</a></td>
        </tr>
    {{/each}}
    </script>
    <!-- 输入框的模板 -->
    <script type="text/template" id="input-template">
        {{each list}}
    <input type="text" name="update" class="update" placeholder="输入你想要修改的内容" value="{{$value.study_content}}">
    {{/each}}
</script>

    <script>
        // 显示页面
        let show = () => {
            $.ajax({
                type: 'get',
                url: '/showUser',
                data: '',
                success: function (result) {
                    console.log(result)
                    let str = template('temp', {
                        list: result
                    })
                    $('tbody').html(str)
                }
            })
        }
        show();

        $('.going').on('click', function () {
            location.href = '/going'
        })
// 删除的ajax请求
        $('tbody').on('click', '.del', function () {
            swal({
                    title: "确定操作吗？",
                    text: "你确定要删除此条内容？",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#DD6B55',
                    confirmButtonText: 'confirm'
                },
                function () {
                    alert("删除成功!");
                    show()
                    $('.update').val(value='')
                })
            let id = $(this).attr('data-id')
            console.log(id);
            $.ajax({
                type: 'get',
                url: '/delUser',
                data: {
                    id: id
                },
                success: function (result) {
                    if (result.code == '1201') {

                    }
                }
            })
        })


        // 更新
        $('tbody').on('click', '.revise', function () {
            let formData = $('.update').serialize();
            console.log(formData);
            let userId = $(this).attr('data-id');
            // console.log(userId);
            $.ajax({
                type: 'post',
                url: '/userUpdate',
                data: formData + '&id=' + userId,
                beforeSend: function () {
                    let flag = confirm('您确定要修改吗？');
                    if (!flag) {
                        return false;
                    }
                },
                success: function (result) {
                    if (result.code == '1002') {
                        swal("操作成功", "已修改", "success");
                        show()
                        $('.update').val(value='')
                    }
                }
            })
        })
        // 回显
        $('tbody').on('click', '.upt', function () {
            let userId = $(this).data('id');
            console.log(userId);
            // 请求方式: get(获取数据) post(发送数据) delete(删除数据) put(更新数据) 
            $.ajax({
                type: 'get',
                url: '/userFind',
                data: {
                    id: userId
                },
                success: function (data) {
                    // console.log(data);
                    let infoHtml = template('input-template', {
                        list: data
                    });

                    $('.input').html(infoHtml);
                }
            })
        })
    </script>
</body>

</html>